<!DOCTYPE html>
<html id="J_wrapper">

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/cssReset.css"/>
		<!-- uc强制竖屏 -->
		<meta name="screen-orientation" content="portrait">
		<!-- qq强制竖屏 -->
		<meta name="x5-orientation" content="portrait">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<style type="text/css">
			p{
				width: 7.5rem;
				background: #CCC;
				font-size: 0.20rem;
				height: 1rem;
				margin-bottom: 0.2rem;
			}
		</style>
	</head>

	<body>
		<div id="vue">
			<p>这是打一端文字，他的宽度是整个屏幕的宽度</p>
			<p>这是打一端文字，他的宽度是整个屏幕的宽度</p>
			<p>这是打一端文字，他的宽度是整个屏幕的宽度</p>
			<p>这是打一端文字，他的宽度是整个屏幕的宽度</p>
			<p>这是打一端文字，他的宽度是整个屏幕的宽度</p>
			<p>这是打一端文字，他的宽度是整个屏幕的宽度</p>
			<p>这是打一端文字，他的宽度是整个屏幕的宽度</p>
			<p>这是打一端文字，他的宽度是整个屏幕的宽度</p>
			<p>这是打一端文字，他的宽度是整个屏幕的宽度</p>
			<p>这是打一端文字，他的宽度是整个屏幕的宽度</p>
			<p>这是打一端文字，他的宽度是整个屏幕的宽度</p>
			<p>这是打一端文字，他的宽度是整个屏幕的宽度</p>
			<p>这是打一端文字，他的宽度是整个屏幕的宽度</p>
			<p>这是打一端文字，他的宽度是整个屏幕的宽度</p>
			<p>这是打一端文字，他的宽度是整个屏幕的宽度</p>
			<p>这是打一端文字，他的宽度是整个屏幕的宽度</p><p>这是打一端文字，他的宽度是整个屏幕的宽度</p><p>这是打一端文字，他的宽度是整个屏幕的宽度</p><p>这是打一端文字，他的宽度是整个屏幕的宽度</p><p>这是打一端文字，他的宽度是整个屏幕的宽度</p>
		</div>
		
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		(function(win, doc) {
			change();
			function change() {
				var width = document.documentElement.clientWidth;
         		var height =  document.documentElement.clientHeight;
         		if(width>height){
					doc.documentElement.style.fontSize = doc.documentElement.clientWidth * 100 / 750 + 'px';
         			
         		}else{
         			doc.documentElement.style.fontSize = doc.documentElement.clientHeight * 100 / 750 + 'px';
         		}

			}
			cheng = change();
			win.addEventListener('resize', change, false);
			win.addEventListener('orientationchange', change, false);
		})(window, document);
	</script>
	<script type="text/javascript">
		// 利用 CSS3 旋转 对根容器逆时针旋转 90 度
		var detectOrient = function() {
		var width = document.documentElement.clientWidth,
		      height =  document.documentElement.clientHeight,
		      $wrapper =  document.getElementById("J_wrapper"),
		      style = "";
		if( width <= height ){ // 横屏
		      style += "width:" + width + "px;";  // 注意旋转后的宽高切换
		      style += "height:" + height + "px;";
		      style += "-webkit-transform: rotate(0); transform: rotate(0);";
		      style += "-webkit-transform-origin: 0 0;";
		      style += "transform-origin: 0 0;";
		      style += "font-size:"+ (width*100/750) +"px";
		      
		}
		else{ // 竖屏
		      style += "width:" + height + "px;"; 
		      style += "height:" + width + "px;"; 
		      style += "-webkit-transform: rotate(-90deg); transform: rotate(-90deg);";
		      // 注意旋转中点的处理
		      style += "-webkit-transform-origin: " + height / 2 + "px " + (height / 2) + "px;";
		      style += "transform-origin: " + height / 2 + "px " + (height / 2) + "px;";
		      style += "font-size:"+ height*100/750 +"px;";
		      style += "overflow-y: hidden;";
		      console.log(style);
		}
		$wrapper.style.cssText = style;
		
		}
		window.onresize = detectOrient;
		detectOrient();


	$("p").click(function(){
		alert(1);
	})

	</script>
</html>